<template>
    <s-layout :title="`合同管理详情`" navbar="normal" leftIconColor="#333" :autoBack="false" :bgColor="state.bgColor" :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx' }">
        <view class="app" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">

            <view class="background_box area" :style="{ height: 'calc(100vh - (' + (safeAreaInsets?.top + 44) + 'px) - 148rpx - 20rpx - 88rpx)' }">
                <view class="subtitle">合同信息</view>
                <scroll-view scroll-y class="scroll_view" v-if="FormData">
                    <view class="infor_item">
                        <view class="label">部门</view>
                        <view class="content">{{ FormData?.department.name }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">姓名</view>
                        <view class="content">{{ FormData?.name }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">工资</view>
                        <view class="content">{{ FormData?.salary }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">性别</view>
                        <view class="content">{{ FormData?.gender == 1 ? '男' : '女' }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">邀请人</view>
                        <view class="content">{{ FormData?.share.nickname }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">身份证号</view>
                        <view class="content">{{ FormData?.identity_id }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">联系电话</view>
                        <view class="content">{{ FormData?.mobile }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">入职日期</view>
                        <view class="content">{{ FormData?.join_date }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">入职状态</view>
                        <view class="content">{{ FormData?.state == 1 ? '已入职' : '已离职' }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">用工单位</view>
                        <view class="content">{{ FormData?.company }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">工作地点</view>
                        <view class="content">{{ FormData?.city }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">工作岗位</view>
                        <view class="content">{{ FormData?.position }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">合同年限</view>
                        <view class="content">{{ FormData?.year }}年</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">创建时间</view>
                        <view class="content">{{ formatDate(FormData?.createtime) }}</view>
                    </view>
                    <view>
                        <view class="label">实际居住地</view>
                        <view class="residence">{{ FormData?.address }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">紧急联系人</view>
                        <view class="content">{{ FormData?.emergency_contact }}</view>
                    </view>
                    <view class="infor_item">
                        <view class="label">紧急联系人电话</view>
                        <view class="content">{{ FormData?.emergency_contact_mobile }}</view>
                    </view>
                </scroll-view>
            </view>
            <view class="placeholder"></view>
        </view>
    </s-layout>
    <view>
        <s-button @netWork="viewer_contract" :text="'查看合同'"></s-button> 
    </view>
</template>

<script setup>
    import {reactive,ref} from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import sheep from '@/sheep';
    import { baseUrl } from '@/sheep/config';
    import { formatFileSize } from '@/utils/fn.js';
    import { formatDate } from '@/utils/fn.js';
    const state = ref({
        bgColor: '#fff',
        ids: ''
    })
    const { safeAreaInsets } = uni.getSystemInfoSync()
    const ids = ref()
    onLoad((options) => {
        ids.value = options.ids
        getDispatchDetails()
    })

    // 查看合同
    const viewer_contract = () => {
        uni.showLoading({ title: '读取中' });
        uni.downloadFile({
            url: `${baseUrl}${FormData.value.contact_url}`,
            success: function (data) {
                if (data.statusCode === 200) {
                    uni.getFileSystemManager().saveFile({
                    tempFilePath: data.tempFilePath, //临时路径
                    filePath: uni.env.USER_DATA_PATH + "/contract", 
                    success: function (res) {
                            setTimeout(() => {
                            var filePath = res.savedFilePath;
                                uni.hideLoading();
                                uni.openDocument({   
                                filePath: filePath,
                                fileType: 'pdf',
                                showMenu: true, // 显示右上角菜单（在小程序中可实现转发等操作）
                                success: function (ress) {
                                    // sheep.$helper.toast(ress.errMsg)
                                },
                                fail(err) {
                                    console.log(err.errMsg)
                                    sheep.$helper.toast(err.errMsg)
                                }
                                });
                            
                        
                            }, 1000)
                        }
                        });
                
                    }else{
                        sheep.$helper.toast('服务器资源已删除')
                    }
            
            },
            fail: (err) => {
            uni.hideLoading()
            sheep.$helper.toast('暂时没有合同信息')
            }
        });
    }

    // 封装管理合同详情方法

    const FormData = ref()
    const getDispatchDetails = async () => {
        let params = {
            ids:ids.value
        }
        const res = await sheep.$api.contract.getDispatchView(params)
        FormData.value = res.data
      
    }

</script>

<style lang="scss" scoped>
    .app {
        width: 100%;
        height: auto;
    }

    .area {
        width: calc(100% - 100rpx);
        margin: 0 20rpx;
    }
    
    .main {
        width: calc(100% - 44rpx);
        background-color: transparent;
        margin: 20rpx auto;
        overflow: hidden;
    }

    .background_box {
        height: 76vh;
        border-radius: 8px;
        background-color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
        margin-top: 20rpx;
        padding: 30rpx 30rpx 40rpx 30rpx;
    }

    .big_box {
        border-radius: 16rpx;
        background-color: rgba(0, 0, 0, 0);
    }

    .subtitle {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        height: 90rpx;
        line-height: 90rpx;
    }
    .scroll_view {
        height: calc(100% - 90rpx);
    }
    
    //合同信息
    .information {
        display: flex;
        flex-direction: column;
    }

    .infor_item {
        height: 70rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    
        .blue {
            font-weight: 600;
            color: $uni-color-primary;
        }
    }

    .label {
        font-family: PingFangSC;
        color: #999999;
        font-weight: 500;
        font-size: $uni-font-size-base;
    }

    .content {
        font-family: PingFangSC;
        width: 65%;
        color: #333333;
        font-weight: 500;
        font-size: 28rpx;
        font-style: normal;
        text-decoration: none;
        text-align: right;
    }

    .residence {
        margin: 20rpx 0;
        font-family: PingFangSC;
        color: #333333;
        font-weight: 500;
        font-size: 28rpx;
        font-style: normal;
        text-decoration: none;
    }
    
    .placeholder {
        height: 30rpx;
    }
</style>